<style>	
.layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}
.layout-logo{
    width: 270px;
    height: 35px;
    background: #f7f8f9;
    color:#060606;
    border-radius: 3px;
    float: left;
    position: absolute;
    align-items: center;
    text-align: center;
    font-family: Alimama ShuHeiTi;
    font-size: 25px;
    font-weight: bold;
    line-height: normal;
    text-align: center;
    letter-spacing: 0em;
    top:17px;
    left:20px;
}
.layout-nav{
    width: 420px;
    margin: 0 auto;
    margin-right: 20px;
}
</style>
<template>
    <div class="layout">
        <Layout>
            <Header>
                <Menu mode="horizontal" theme="dark" active-name="1">
                  <div class="layout-logo">学生成绩管理系统</div>
                    <div class="layout-nav">
                        <MenuItem name="1">
                            <Icon type="ios-navigate"></Icon>
                            学生管理
                        </MenuItem>
                        <MenuItem name="2">
                            <Icon type="ios-keypad"></Icon>
                            成绩管理
                        </MenuItem>
                        <MenuItem name="3">
                            <Icon type="ios-analytics"></Icon>
                            课程管理
                        </MenuItem>
                        <MenuItem name="4">
                            <Icon type="ios-paper"></Icon>
                            日志审计
                        </MenuItem>
                    </div>
                </Menu>
            </Header>
            <Layout>
                <Sider hide-trigger :style="{background: '#fff'}">
                    <Menu active-name="1-2" theme="light" width="auto" :open-names="['1']">
                        <Submenu name="1">
                            <template #title>
                                <Icon type="ios-navigate"></Icon>
                                学生管理
                            </template>
                            <MenuItem name="1-1"><router-link to="infor">查看个人信息</router-link></MenuItem>
                            <MenuItem name="1-2"><router-link to="cginfor">修改个人信息</router-link></MenuItem>
                            <MenuItem name="1-3"><router-link to="home">查看成绩表</router-link></MenuItem>
                        </Submenu>
                        <Submenu name="2">
                            <template #title>
                                <Icon type="ios-keypad"></Icon>
                                成绩管理
                            </template>
                            <MenuItem name="2-1"><router-link to="gradelis">成绩分析</router-link></MenuItem>
                            <MenuItem name="2-2"><router-link to="home">查看成绩表</router-link></MenuItem>
                        </Submenu>
                        <Submenu name="3">
                            <template #title>
                                <Icon type="ios-analytics"></Icon>
                                课程管理
                            </template>
                            <MenuItem name="3-1"><router-link to="course">查看课程表</router-link></MenuItem>
                            <MenuItem name="3-2"><router-link to="cgcourse">修改课程表</router-link></MenuItem>
                        </Submenu>
                        <Submenu name="4">
                            <template #title>
                                <Icon type="ios-analytics"></Icon>
                                日志审计
                            </template>
                        </Submenu>
                    </Menu>
                </Sider>
                <Layout :style="{padding: '0 24px 24px'}">
                    <Breadcrumb :style="{margin: '24px 0'}">
                        <BreadcrumbItem><router-link to="home">主页</router-link></BreadcrumbItem>
                        <BreadcrumbItem>学生管理</BreadcrumbItem>
                        <BreadcrumbItem>修改个人信息</BreadcrumbItem>
                    </Breadcrumb>
                    <Content :style="{padding: '24px', minHeight: '280px', background: '#fff'}">
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="姓名" prop="姓名">
            <Input v-model="formValidate.name" placeholder="请输入你的姓名"></Input>
        </FormItem>
        <FormItem label="性别" prop="性别">
            <RadioGroup v-model="formValidate.gender">
                <Radio label="男">男</Radio>
                <Radio label="女">女</Radio>
            </RadioGroup>
        </FormItem>
        <FormItem label="学号" prop="学号">
            <Input v-model="formValidate.number" placeholder="请输入你的学号"></Input>
        </FormItem>
        <FormItem label="年级" prop="年级">
            <CheckboxGroup v-model="formValidate.interest">
                <Checkbox label="大一"></Checkbox>
                <Checkbox label="大二"></Checkbox>
                <Checkbox label="大三"></Checkbox>
                <Checkbox label="大四"></Checkbox>
            </CheckboxGroup>
        </FormItem>
        <FormItem label="专业" prop="专业">
            <Select v-model="formValidate.city" placeholder="请选择你的专业">
                <Option value="信息管理与信息系统">信息管理与信息系统</Option>
                <Option value="医疗信息技术">医疗信息技术</Option>
                <Option value="软件工程">软件工程</Option>
            </Select>
        </FormItem>
        <FormItem label="修改日期">
            <Row>
                <Col span="11">
                    <FormItem prop="date">
                        <DatePicker type="date" placeholder="请选择日期" v-model="formValidate.date"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="2" style="text-align: center">-</Col>
                <Col span="11">
                    <FormItem prop="time">
                        <TimePicker type="time" placeholder="请选择时间" v-model="formValidate.time"></TimePicker>
                    </FormItem>
                </Col>
            </Row>
        </FormItem>
        <FormItem label="其他" prop="其他">
            <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="说点什么..."></Input>
        </FormItem>
        <FormItem>
            <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
            <Button @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
        </FormItem>
    </Form>
                    </Content>
                </Layout>
            </Layout>
        </Layout>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                formValidate: {
                    name: '',
                    mail: '',
                    city: '',
                    gender: '',
                    interest: [],
                    date: '',
                    time: '',
                    desc: ''
                },
                ruleValidate: {
                    name: [
                        { required: true, message: 'The name cannot be empty', trigger: 'blur' }
                    ],
                    mail: [
                        { required: true, message: 'Mailbox cannot be empty', trigger: 'blur' },
                        { type: 'email', message: 'Incorrect email format', trigger: 'blur' }
                    ],
                    city: [
                        { required: true, message: 'Please select the city', trigger: 'change' }
                    ],
                    gender: [
                        { required: true, message: 'Please select gender', trigger: 'change' }
                    ],
                    interest: [
                        { required: true, type: 'array', min: 1, message: 'Choose at least one hobby', trigger: 'change' },
                        { type: 'array', max: 2, message: 'Choose two hobbies at best', trigger: 'change' }
                    ],
                    date: [
                        { required: true, type: 'date', message: 'Please select the date', trigger: 'change' }
                    ],
                    time: [
                        { required: true, type: 'string', message: 'Please select time', trigger: 'change' }
                    ],
                    desc: [
                        { required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
                        { type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.$Message.success('Success!');
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            }
        }
    }
</script>